import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:wheel_of_fortune/candy/widgets/counter.dart';
import 'package:wheel_of_fortune/http/wheel_server.dart';
import 'package:wheel_of_fortune/utils/utils.dart';

import 'customer_button.dart';

class CandyExchange extends StatefulWidget {
  ///
  final int candyExchangeAmount;
  final int balance;
  final rotaryTableId;
  const CandyExchange(
      {this.candyExchangeAmount = 10,
      this.balance = 50,
      this.rotaryTableId = '',
      Key key})
      : super(key: key);

  @override
  _CandyExchangeState createState() => _CandyExchangeState();
}

class _CandyExchangeState extends State<CandyExchange> {
  bool selectExchange = false;
  int _count = 1;
  bool loading = false;
  exchange() async {
    if (selectExchange) {
      try {
        setState(() {
          loading = true;
        });
        await WheelService().candyExchange(widget.rotaryTableId, _count);
        await Fluttertoast.showToast(msg: 'Exchange success！', gravity: ToastGravity.CENTER);
        Navigator.of(context).pop(true);
      } catch (e) {
        Navigator.of(context).pop(false);
      }
    } else {
      setState(() {
        selectExchange = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Image.asset(
              'assets/images/FortuneWheel_ExchangeIcon_Candy.jpg',
            ),
          ),
          selectExchange
              ? Container(
                  padding: EdgeInsets.only(top: 30, bottom: 10),
                  alignment: Alignment.center,
                  child: Text.rich(
                    TextSpan(children: [
                      TextSpan(
                        text: 'Candy Balance  ',
                        style: TextStyle(
                          color: mainColor,
                          fontSize: 26,
                          fontFamily: 'Avenir Next LT Pro',
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      TextSpan(
                        text: widget.balance.toString(),
                        style: TextStyle(
                            color: yellowColor,
                            fontSize: 26,
                            fontFamily: 'Avenir Next LT Pro',
                            fontWeight: FontWeight.bold),
                      ),
                    ]),
                  ),
                )
              : Container(
                  padding: EdgeInsets.only(top: 30, bottom: 10),
                  alignment: Alignment.center,
                  child: Text(
                    'Spin using Candy!',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: mainColor,
                      fontSize: 26,
                      fontFamily: 'Avenir Next LT Pro',
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
          Container(
            padding: EdgeInsets.only(top: 0, bottom: selectExchange ? 30 : 60),
            alignment: Alignment.center,
            child: Text(
              'Exchange ${widget.candyExchangeAmount} candies for 1 spin!',
              textAlign: TextAlign.center,
              strutStyle:
                  StrutStyle(forceStrutHeight: true, height: 1, leading: 0.9),
              style: TextStyle(
                color: mainColor,
                fontSize: 14,
                fontFamily: 'Avenir Next LT Pro',
              ),
            ),
          ),
          if (selectExchange)
            Padding(
              padding: EdgeInsets.fromLTRB(66, 0, 66, 50),
              child: Counter(
                total: widget.balance ~/ widget.candyExchangeAmount,
                callBack: (count) {
                  setState(() {
                    _count = count;
                    print(_count);
                  });
                },
              ),
            ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              BgButton(
                title: selectExchange
                    ? 'Redeem'
                    : '${widget.candyExchangeAmount} candies for 1 spin!',
                width: 200.0,
                color: loading ? yellowColor : deepYellowColor,
                onTap: loading ? () {} : exchange,
              ),
              SizedBox(
                height: 20,
              ),
              InkWell(
                onTap: loading ? null : () => Navigator.of(context).pop(false),
                child: Text(
                  'Cancel',
                  style: TextStyle(
                    color: greyDBColor,
                    fontSize: 16,
                    fontFamily: 'Avenir Next LT Pro',
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 30,
          ),
        ],
      ),
    );
  }
}
